<template>
  <div class="home">
    <PageHeader msg="神影电影"/>
		<div class="content">
			<div class="movie_menu">
				<router-link tag="div" to="/movie/City" class="city_name" >
					<span>北京</span><i class="fa fa-caret-down"></i>
				</router-link>
				<div class="hot_switch">
					<router-link tag="div" to="/movie/NowPlaying" class="hot_item active">正在热映</router-link>
					<router-link tag="div" to="/movie/ComingSoon" class="hot_item">即将上映</router-link>
				</div>
				<router-link tag="div" to="/movie/search" class="search_entry">
					<i class="fa fa-search"></i>
				</router-link>
			</div>
			<!-- 二级路由渲染 -->
			<keep-alive>
				<router-view></router-view>
			</keep-alive>
		</div>
	<TabBar></TabBar>
  </div>
</template>

<script>
// @ is an alias to /src
import PageHeader from '@/components/PageHeader.vue'
import TabBar from '@/components/TabBar.vue'
export default {
  name: 'HomeView',
  components: {
   PageHeader,
   TabBar,
  
  }
}
</script>
<style scoped="scoped">
	.movie_menu{
		width: 100%;
		height: 45px;
		border-bottom: 1px solid #E6E6E6;
		display: flex;
		justify-content: space-between;
	}
	.city_name{
		margin-left:20px ;
		height: 100%;
		line-height: 45px;
	}
	.movie_menu .city_name.router-link-active{
		color: #ef4238;
		border-bottom: 2px solid #EF4238;
		box-sizing: border-box;
	}
	.hot_switch{
		display: flex;
		height: 100%;
		line-height: 45px;
	}
	.hot_item{
		font-size: 15px;
		color: #666;
		width: 80px;
		text-align: center;
		margin: 0 12px;
		font-weight: 700;
	}
		
	.movie_menu .hot_item.router-link-active{
	color: #EF4238;
	border-bottom: 2px solid #EF4238;
	}
		
	.movie_menu .search_entry{
	margin-right: 20px;
	height: 100%;
	line-height: 45px;
	}
	.movie_menu .search_entry.router-link-active{
		color: #ef4238;
		border-bottom: 2px solid #EF4238;
		box-sizing: border-box;
	}
	.movie_menu .search_entry{
		font-size: 24px;
		color: red;
	}
</style>